<template>
  <div>
    <el-alert
      v-if="list.length == 0"
      :closable="false"
      description="暂无待发放薪酬记录！"
      show-icon
      title="提示"
      type="info">
    </el-alert>
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button plain size="mini" type="primary" v-if="list.length > 0" @click="handleConfirmIssuanceAll">确认发放</el-button>
      </el-col>
    </el-row> -->
    <el-row v-for="item in list" :key="item.groupName" class="group_css">
      <el-col :span="18" class="group_title">{{
          selectDictLabels(dict.type.cld_project_groups, item.groupName)
        }}人员薪酬状态
      </el-col>
      <el-table :data="item.list" @selection-change="handleSelectionChange" border>
        <!-- <el-table-column align="center" type="selection" width="55"/> -->
        <el-table-column align="center" label="月份">
          <template slot-scope="scope">
            <span>{{ scope.row.year + '-' + scope.row.month }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" prop="staffName"/>
        <el-table-column align="center" label="岗位" prop="projectPostName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cld_project_post" :value="scope.row.projectPostName"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="职务" prop="projectDuitsName">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.cld_project_duits" :value="scope.row.projectDuitsName"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="职别" prop="jobName"/>
        <el-table-column align="center" label="银行卡号" prop="bankCard" width="200px;"/>
        <el-table-column align="center" label="出勤天数" prop="attDays"/>
        <el-table-column align="center" label="基本工资" prop="basicSalary">
          <template slot-scope="scope">
            {{ toMoney(scope.row.basicSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="绩效津贴" prop="basedSalary">
          <template slot-scope="scope">
            {{ toMoney(scope.row.basedSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="加班工资" prop="overtimeSalary">
          <template slot-scope="scope">
            {{ toMoney(scope.row.overtimeSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="福利津贴" prop="welfareSalary">
          <template slot-scope="scope">
            {{ toMoney(scope.row.welfareSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="奖惩金额" prop="awardSalary">
          <template slot-scope="scope">
            {{ toMoney(scope.row.awardSalary - scope.row.fineSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="保险费用" prop="insuranceSalary">
          <template slot-scope="scope">
            {{ toMoney(-scope.row.insuranceSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工服费用" prop="clothesSalary">
          <template slot-scope="scope">
            {{ toMoney(-scope.row.clothesSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工作计划" prop="workSalary">
          <template slot-scope="scope">
            {{ toMoney(scope.row.workSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="应发薪酬" prop="inSalary">
          <template slot-scope="scope">
            {{ toMoney(scope.row.inSalary) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="实发薪酬" prop="sendSalary">
          <template slot-scope="scope">
            {{ calculateSalary(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleConfirmIssuance(scope.row)">确认发放</el-button>
            <el-button v-hasPermi="['cld:CldPayDetails:edit']" size="mini" type="text"
                       @click="handleViewDetails(scope.row)">查看明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isViewPayOpen" append-to-body
               title="明细"
               width="90%">
      <calendar v-if="isViewPayOpen" :dateMonth="currRow.year + '-' + currRow.month"
                :form="currRow" :projectId="$route.params.projectId"></calendar>
    </el-dialog>
  </div>
</template>

<script>
import {confirmIssuance, getCumulativeSalaryByProjectId} from "@/api/cld/CldPayDetails";
import calendar from "./calendar.vue";

export default {
  name: "projectDetails",
  dicts: ['cld_project_groups', 'cld_project_post', 'cld_project_duits'],
  components: {
    calendar
  },
  data() {
    return {
      list: [],
      queryParams: {
        projectId: this.$route.params.projectId,
        isSend: 0
      },
      isViewPayOpen: false,
      currRow: {},
      form: {},
      ids: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查看项目在岗人员薪酬列表 */
    getList() {
      getCumulativeSalaryByProjectId(this.queryParams).then(response => {
        this.list = this.groupBy(response.data, 'groupName');
      });
    },
    // 计算实发工资
    calculateSalary(row) {
      let money = row.basicSalary + row.basedSalary + row.overtimeSalary + row.welfareSalary + row.awardSalary + row.insuranceSalary + row.clothesSalary +
        row.fineSalary + row.workSalary;
      return this.toMoney(money);
    },
    // 多选
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.staffId);
    },
    /** 确认发放 */
    handleConfirmIssuanceAll() {
      this.$confirm(`是否确认发放薪酬?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.staffIds = this.ids.join(',');
        this.form.projectId = this.$route.params.projectId;
        confirmIssuance(this.form).then(res => {
          this.$modal.msgSuccess("操作成功");
        })
      }).catch(() => {
      });
    },
    /** 确认发放 */
    handleConfirmIssuance(row) {
      const staffIds = row.staffId;
      this.$confirm(`是否确认发放[${row.staffName}]的薪酬?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmIssuance({
          staffIds: staffIds,
          projectId: this.$route.params.projectId,
          year: row.year,
          month: row.month
        }).then(res => {
          this.$modal.msgSuccess("操作成功");
          this.getList();
        })
      }).catch(() => {
      });

    },
    // 详情查看
    handleViewDetails(row) {
      this.currRow = row;
      this.isViewPayOpen = true;
    },
    groupBy(arr, key) {
      let result = [];
      if (arr == null) {
        return null;
      }
      arr.forEach(item => {
        let find = result.filter(d => d.groupName == item[key]);
        if (find.length > 0) {
          find[0].list.push(item);
        } else {
          let list = [];
          list.push(item);
          result.push({"groupName": String(item[key]), "list": list});
        }
      });
      return result;
    }
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: left;
  color: black;
}

.group_css {
  background: #9093991c;
  margin-bottom: 20px;
}

.group_title {
  font-size: 18px;
  padding: 10px;
  font-weight: 600;
}

.group_number {
  text-align: right;
  padding: 10px;
  padding-right: 50px;
  font-size: 18px;
}
</style>
